<template>
  <div style="margin: 60px auto;width: 1200px">
    <el-row :gutter="10">
      <el-col :span="4">
        <el-card style="height: 400px;background: linear-gradient(#C2C9FF,#fff)">
          <el-row :gutter="10">
            <el-col :span="12">
              <img src="homecontent/hotGame.png" alt="" style="width: 65px;margin-top: 10px;margin-left: 10px">
            </el-col>
            <el-col :span="12">
              <el-button @click="router.push('/buy')"
                         style="width: 65px;height: 20px;color: #999;border: none;background: rgba(0,0,0,0);margin-top: 12px">
                全部游戏
              </el-button>
            </el-col>
          </el-row>
          <a href="#" style="text-decoration: none">
            <div style="height: 60px">
              <el-row :gutter="10">
                <el-col :span="10"><img src="homecontent/mingchao.png" style="height: 50px;margin-left: 10px"></el-col>
                <el-col :span="14" style="line-height: 50px;font-size: 18px">鸣潮</el-col>
              </el-row>
            </div>
          </a>
          <a href="#" style="text-decoration: none">
            <div style="height: 60px">
              <el-row :gutter="10">
                <el-col :span="10"><img src="homecontent/wangzherongyao.png" style="height: 50px;margin-left: 10px"></el-col>
                <el-col :span="14" style="line-height: 50px;font-size: 18px">王者荣耀</el-col>
              </el-row>
            </div>
          </a>
          <a href="#" style="text-decoration: none">
            <div style="height: 60px">
              <el-row :gutter="10">
                <el-col :span="10"><img src="homecontent/yongjiewujian.png" style="height: 50px;margin-left: 10px"></el-col>
                <el-col :span="14" style="line-height: 50px;font-size: 18px">永劫无间</el-col>
              </el-row>
            </div>
          </a>
          <a href="#" style="text-decoration: none">
            <div style="height: 60px">
              <el-row :gutter="10">
                <el-col :span="10"><img src="homecontent/genshin.png" style="height: 50px;margin-left: 10px"></el-col>
                <el-col :span="14" style="line-height: 50px;font-size: 18px">原神</el-col>
              </el-row>
            </div>
          </a>
          <a href="#" style="text-decoration: none">
            <div style="height: 60px">
              <el-row :gutter="10">
                <el-col :span="10"><img src="homecontent/hepingjingying.png" style="height: 50px;margin-left: 10px"></el-col>
                <el-col :span="14" style="line-height: 50px;font-size: 18px">和平精英</el-col>
              </el-row>
            </div>
          </a>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card style="border: none">
          <!--                <el-carousel height="400px">
                            <el-carousel-item>
                              <img src="homecontent/lunbo/img1.png" alt="" style="width: 750px">
                            </el-carousel-item>
                            <el-carousel-item>
                              <img src="homecontent/lunbo/img2.png" alt="" style="width: 750px;">
                            </el-carousel-item>
                          </el-carousel>-->
          <!--轮播图-->
          <div class="carousel-container">
            <el-carousel ref="carousel" indicator-position="none" height="340px">
              <el-carousel-item v-for="(item, index) in items" :key="index">
                <div class="carousel-item-content">
                  <img :src="item.src" :alt="item.alt" class="carousel-image">
                  <!--                <div class="carousel-caption">{{ item.caption }}</div>-->
                </div>
              </el-carousel-item>
            </el-carousel>
            <div class="carousel-buttons">
              <button
                  v-for="(item, index) in items"
                  :key="index"
                  :class="['carousel-button', { active: activeIndex === index }]"
                  @click="goToSlide(index)" style="width: 199px;height: 60px"
              >
                {{ item.caption }}
              </button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <a href="identify">
          <img src="homecontent/identify1.png" alt="" style="width:190px;margin-bottom: 15px ">
        </a>
        <img src="homecontent/identify2.png" alt="" style="width:190px;margin-top: 15px;margin-bottom: 25px">
        <img src="homecontent/home-translate.png" alt="" style="width:190px">
      </el-col>
    </el-row>
    <!--浏览账号-->
    <!--  筛选项  -->
    <h2 style="display: inline-block;width: 128px;line-height: 50px;margin-top: 0;position: relative;top:10px;background-color: #5468ff;color: #fff;border-radius: 15px;text-align: center">优选账号</h2>
    <div style="width: 1040px;background-color: #fff;display: inline-block;height: 50px;border-radius: 5px;margin-left: 30px">
    <el-radio-group style="margin-bottom: 15px;width: 960px;" v-model="type" @change="loadAudit">
      <el-radio-button value="10" style="height: 50px!important;" size="large">鸣潮</el-radio-button>
      <el-radio-button value="20" style="height: 50px" size="large">王者荣耀</el-radio-button>
      <el-radio-button value="30" style="height: 50px" size="large">永劫无间</el-radio-button>
      <el-radio-button value="40" style="height: 50px" size="large">原神</el-radio-button>
      <el-radio-button value="50" style="height: 50px" size="large">和平精英</el-radio-button>
    </el-radio-group>
    <a href="buy"  style="text-decoration: none;position: relative;top:5px">更多账号</a>
    </div>
    <!--  循环显示列表最优账号  -->
    <el-row :gutter="10">
     <el-col :span="6" v-for="item in browsingAccountsArr">
         <el-card style="height: 280px;width: 291px;display: inline-block;margin-right: 8.3px">
           <router-link :to="'/goods/details?id='+item.id" style="text-decoration: none;color: #555">
           <img :src="item.img" alt="" style="height: 164px;width: 291px">
           <p style="margin-left: 10px;margin-top: 2px;margin-bottom: 10px">{{ item.describe }}</p>
           <el-button
               style="border: #5468ff solid 1px;border-radius: 3px;background-color: #fff;color: #5468ff;height: 14px;width: 60px;margin-left: 10px">
             支持包赔
           </el-button>
           <span style="margin-left: 10px">{{ item.platform }}</span>
           <br>
           <br>
           <span style="font-size: 16px;color: red;margin-left: 10px">¥{{ item.price }}</span>
           <span style="margin-left: 180px">¥{{ item.createTime }}</span>
           </router-link>
         </el-card>
     </el-col>
    </el-row>

<!--    废弃设置-->
<!--    <div style="width: 1220px">-->
<!--    <a :href="item.url" v-for="item in browsingAccountsArr" style="text-decoration: none;font-size: 12px">
      <el-card style="height: 280px;width: 291px;display: inline-block;margin-right: 8.3px">
        <img :src="item.img" alt="" style="height: 164px;width: 291px">
        <p style="margin-left: 10px;margin-top: 2px;margin-bottom: 10px">{{ item.describe }}</p>
        <el-button
            style="border: #5468ff solid 1px;border-radius: 3px;background-color: #fff;color: #5468ff;height: 14px;width: 60px;margin-left: 10px">
          支持包赔
        </el-button>
        <span style="margin-left: 10px">{{ item.platform }}</span>
        <br>
        <br>
        <span style="font-size: 16px;color: red;margin-left: 10px">¥{{ item.price }}</span>
        <span style="margin-left: 180px">¥{{ item.createTime }}</span>
      </el-card>
    </a>-->
<!--    </div>-->

    <h2 style="display: inline-block;width: 128px;line-height: 50px;margin-top: 0;position: relative;top:10px;background-color: #5468ff;color: #fff;border-radius: 15px;text-align: center">最新账号</h2>
    <div style="width: 1040px;background-color: #fff;display: inline-block;height: 50px;border-radius: 5px;margin-left: 30px">
    <el-radio-group style="margin-bottom: 15px;width: 960px;" v-model="type" @change="loadAudit">
      <el-radio-button value="10" style="height: 50px!important;" size="large">鸣潮</el-radio-button>
      <el-radio-button value="20" style="height: 50px" size="large">王者荣耀</el-radio-button>
      <el-radio-button value="30" style="height: 50px" size="large">永劫无间</el-radio-button>
      <el-radio-button value="40" style="height: 50px" size="large">原神</el-radio-button>
      <el-radio-button value="50" style="height: 50px" size="large">和平精英</el-radio-button>
    </el-radio-group>
    <a href="buy"  style="text-decoration: none;position: relative;top:5px">更多账号</a>
    </div>
    <!--  循环显示列表最新账号  -->
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in browsingAccountsArr">
          <el-card style="height: 280px;width: 291px;display: inline-block;margin-right: 8.3px">
            <router-link :to="'/goods/details?id='+item.id" style="text-decoration: none;color: #555">
            <img :src="item.img" alt="" style="height: 164px;width: 291px">
            <p style="margin-left: 10px;margin-top: 2px;margin-bottom: 10px">{{ item.describe }}</p>
            <el-button
                style="border: #5468ff solid 1px;border-radius: 3px;background-color: #fff;color: #5468ff;height: 14px;width: 60px;margin-left: 10px">
              支持包赔
            </el-button>
            <span style="margin-left: 10px">{{ item.platform }}</span>
            <br>
            <br>
            <span style="font-size: 16px;color: red;margin-left: 10px">¥{{ item.price }}</span>
            <span style="margin-left: 180px">¥{{ item.createTime }}</span>
            </router-link>
          </el-card>
      </el-col>
    </el-row>
    <!--      游戏交易资讯-->
    <div style="width: 1200px">

<!--  废弃设置    &lt;!&ndash;    <a :href="'/goods/details?id='+item.id" v-for="item in browsingAccountsArr" style="text-decoration: none;font-size: 12px">&ndash;&gt;
      <el-card v-for="item in browsingAccountsArr" style="height: 280px;width: 291px;display: inline-block;margin-right: 8.3px;font-size: 12px;">
        <router-link :to="'/goods/details?id='+item.id" style="text-decoration: none;color: #555">
          <img :src="item.img" alt="" style="height: 164px;width: 291px">
          <p style="margin-left: 10px;margin-top: 2px;margin-bottom: 10px">{{ item.describe }}</p>
          <el-button
              style="border: #5468ff solid 1px;border-radius: 3px;background-color: #fff;color: #5468ff;height: 14px;width: 60px;margin-left: 10px">
            支持包赔
          </el-button>
          <span style="margin-left: 10px">{{ item.platform }}</span>
          <br>
          <br>
          <span style="font-size: 16px;color: red;margin-left: 10px">¥{{ item.price }}</span>
          <span style="margin-left: 180px">{{ item.createTime }}</span>
        </router-link>
      </el-card>-->
      <el-row style="margin-top: 15px;background-color: white; margin-bottom:20px; width: 1200px">
        <el-col :span="8" v-for="item in consultation" >
          <input-card>
            <div>
              <a href="#" style="text-decoration: none;">
                <img :src="item.img" style="width: 40%; border-radius: 20px; float: left ;padding-right: 15px;padding-left: 15px" >
                <h3 id="db1" style="font-size: 15px; color: #333333 ; padding-right: 10px">{{item.title}}</h3>
                <p id="db" style="font-size: 14px; color: #666666; padding-right: 10px">{{item.text}}</p >
                <p style="font-size: 12px;color: #999999">
                  {{item.date}}
                </p>
              </a>
            </div>
          </input-card>
        </el-col>
      </el-row>
<!--    </a>-->
    </div>
    <el-card style="height: 114px">
      <el-row :gutter="10">
       <el-col :span="8">
         <img src="homecontent/footer/yanhao.png" alt="" style="width: 66px;position: relative;top: 25%;left: 30px">
         <span style="position: relative;top: -25%;font-size: 18px;font-weight: bold;left:40px;color: #333">真人验号</span>
         <br>
         <span style="position: relative;top: -15%;font-size: 14px;left:106px;color: #666">
所有商品客服真人验号亲手上架</span>
       </el-col>
       <el-col :span="8">
         <img src="homecontent/footer/identify.png" alt="" style="width: 66px;position: relative;top: 25%;left: 30px">
         <span style="position: relative;top: -25%;font-size: 18px;font-weight: bold;left:40px;color: #333">专业鉴定</span>
         <br>
         <span style="position: relative;top: -15%;font-size: 14px;left:106px;color: #666">
专业鉴定师在线鉴定账号价值</span>
       </el-col>
       <el-col :span="8">
         <img src="homecontent/footer/safebuy.png" alt="" style="width: 66px;position: relative;top: 25%;left: 30px">
         <span style="position: relative;top: -25%;font-size: 18px;font-weight: bold;left:40px;color: #333">安全购号</span>
         <br>
         <span style="position: relative;top: -15%;font-size: 14px;left:106px;color: #666">
四道安全防线，保障交易安全</span>
       </el-col>
      </el-row>
    </el-card>


  </div>

</template>
<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
// 轮播图
const carousel = ref(null);
const items = ref([
  {src: 'homecontent/lunbo/img3.png', alt: '图片2', caption: '五月新游抽奖活动'},
  {src: 'homecontent/lunbo/img2.png', alt: '图片2', caption: '包赔证明服务说明'},
  {src: 'homecontent/lunbo/img4.png', alt: '图片2', caption: '防骗指南'},
  {src: 'homecontent/lunbo/img1.png', alt: '图片1', caption: '禁止未成年人交易'},
]);

const activeIndex = ref(0);

const goToSlide = (index) => {
  if (carousel.value) {
    carousel.value.setActiveItem(index);
  }
  activeIndex.value = index;
};

//筛选类型
const type = ref(10);

//浏览账号数组
const browsingAccountsArr = ref(
    [
      { id:'1',
        img: 'https://file.kejinshou.com/uploads/202405/28/16/5726tW0KoHeW.jpg?x-oss-process=style/goods',
        describe: '总黄数: 2 联觉等级: 5 拥有五星共鸣者: 忌炎,卡卡罗 亮点: 忌炎，卡卡罗，自选券没动，新手池没抽不带票',
        // url: 'https://www.kejinshou.com/goods/details/4495923',
        platform: '官服',
        price: 50,
        createTime: '2024-05-08'
      },
      { id:'222',
        img: 'https://file.kejinshou.com/uploads/202405/28/16/5726tW0KoHeW.jpg?x-oss-process=style/goods',
        describe: '总黄数: 2 联觉等级: 5 拥有五星共鸣者: 忌炎,卡卡罗 亮点: 忌炎，卡卡罗，自选券没动，新手池没抽不带票',
        // url: 'https://www.kejinshou.com/goods/details/4495923',
        platform: '官服',
        price: 50,
        createTime: '2024-05-08'
      },{
        img: 'https://file.kejinshou.com/uploads/202405/28/16/5726tW0KoHeW.jpg?x-oss-process=style/goods',
        describe: '总黄数: 2 联觉等级: 5 拥有五星共鸣者: 忌炎,卡卡罗 亮点: 忌炎，卡卡罗，自选券没动，新手池没抽不带票',
        // url: 'https://www.kejinshou.com/goods/details/4495923',
        platform: '官服',
        price: 50,
        createTime: '2024-05-08'
      },{
        img: 'https://file.kejinshou.com/uploads/202405/28/16/5726tW0KoHeW.jpg?x-oss-process=style/goods',
        describe: '总黄数: 2 联觉等级: 5 拥有五星共鸣者: 忌炎,卡卡罗 亮点: 忌炎，卡卡罗，自选券没动，新手池没抽不带票',
        // url: 'https://www.kejinshou.com/goods/details/4495923',
        platform: '官服',
        price: 50,
        createTime: '2024-05-08'
      },{
        img: 'https://file.kejinshou.com/uploads/202405/28/16/5726tW0KoHeW.jpg?x-oss-process=style/goods',
        describe: '总黄数: 2 联觉等级: 5 拥有五星共鸣者: 忌炎,卡卡罗 亮点: 忌炎，卡卡罗，自选券没动，新手池没抽不带票',
        // url: 'https://www.kejinshou.com/goods/details/4495923',
        platform: '官服',
        price: 50,
        createTime: '2024-05-08'
      },{
        img: 'https://file.kejinshou.com/uploads/202405/28/16/5726tW0KoHeW.jpg?x-oss-process=style/goods',
        describe: '总黄数: 2 联觉等级: 5 拥有五星共鸣者: 忌炎,卡卡罗 亮点: 忌炎，卡卡罗，自选券没动，新手池没抽不带票',
        // url: 'https://www.kejinshou.com/goods/details/4495923',
        platform: '官服',
        price: 50,
        createTime: '2024-05-08'
      },{
        img: 'https://file.kejinshou.com/uploads/202405/28/16/5726tW0KoHeW.jpg?x-oss-process=style/goods',
        describe: '总黄数: 2 联觉等级: 5 拥有五星共鸣者: 忌炎,卡卡罗 亮点: 忌炎，卡卡罗，自选券没动，新手池没抽不带票',
        // url: 'https://www.kejinshou.com/goods/details/4495923',
        platform: '官服',
        price: 50,
        createTime: '2024-05-08'
      },{
        img: 'https://file.kejinshou.com/uploads/202405/28/16/5726tW0KoHeW.jpg?x-oss-process=style/goods',
        describe: '总黄数: 2 联觉等级: 5 拥有五星共鸣者: 忌炎,卡卡罗 亮点: 忌炎，卡卡罗，自选券没动，新手池没抽不带票',
        // url: 'https://www.kejinshou.com/goods/details/4495923',
        platform: '官服',
        price: 50,
        createTime: '2024-05-08'
      },{
        img: 'https://file.kejinshou.com/uploads/202405/28/16/5726tW0KoHeW.jpg?x-oss-process=style/goods',
        describe: '总黄数: 2 联觉等级: 5 拥有五星共鸣者: 忌炎,卡卡罗 亮点: 忌炎，卡卡罗，自选券没动，新手池没抽不带票',
        // url: 'https://www.kejinshou.com/goods/details/4495923',
        platform: '官服',
        price: 50,
        createTime: '2024-05-08'
      },{
        img: 'https://file.kejinshou.com/uploads/202405/28/16/5726tW0KoHeW.jpg?x-oss-process=style/goods',
        describe: '总黄数: 2 联觉等级: 5 拥有五星共鸣者: 忌炎,卡卡罗 亮点: 忌炎，卡卡罗，自选券没动，新手池没抽不带票',
        // url: 'https://www.kejinshou.com/goods/details/4495923',
        platform: '官服',
        price: 50,
        createTime: '2024-05-08'
      },{
        img: 'https://file.kejinshou.com/uploads/202405/28/16/5726tW0KoHeW.jpg?x-oss-process=style/goods',
        describe: '总黄数: 2 联觉等级: 5 拥有五星共鸣者: 忌炎,卡卡罗 亮点: 忌炎，卡卡罗，自选券没动，新手池没抽不带票',
        // url: 'https://www.kejinshou.com/goods/details/4495923',
        platform: '官服',
        price: 50,
        createTime: '2024-05-08'
      },{
        img: 'https://file.kejinshou.com/uploads/202405/28/16/5726tW0KoHeW.jpg?x-oss-process=style/goods',
        describe: '总黄数: 2 联觉等级: 5 拥有五星共鸣者: 忌炎,卡卡罗 亮点: 忌炎，卡卡罗，自选券没动，新手池没抽不带票',
        // url: 'https://www.kejinshou.com/goods/details/4495923',
        platform: '官服',
        price: 50,
        createTime: '2024-05-08'
      },
    ]
)

//游戏交易咨询数组
const consultation = ref([
  {
    img:'/homecontent/1.jpg',
    title:'氪金兽包赔服务：守护你账号的每一分价值',
    text:'在游戏世界里，账号可不仅仅是一串数字或者几个角色那么简单。它承载着玩家的心血、汗水。在账号交易的时候，怎么保证物有所值，是很多玩家关心的事儿。氪金兽交易平台的包赔服务，可是能给玩家带来全面的价值保障。',
    date:'2024.05.31'
  },
  {
    img:'/homecontent/2.jpg',
    title:'游戏账号交易大揭秘：氪金兽为何成为玩家们的首选？',
    text:'市面上的游戏账号交易平台五花八门，虽然都能提供账号交易服务，但服务质量、安全保障等方面却是千差万别。今天，就来给大家揭秘一下，为什么氪金兽交易平台的包赔服务这么受欢迎。',
    date:'2024-06-02 18:03'
  },
  {
    img:'/homecontent/3.jpg',
    title:'鸣潮抽卡指南：角色选择、卡池挑选与抽卡策略详解',
    text:'在游戏世界里，账号可不仅仅是一串数字或者几个角色那么简单。它承载着玩家的心血、汗水。在账号交易的时候，怎么保证物有所值，是很多玩家关心的事儿。氪金兽交易平台的包赔服务，可是能给玩家带来全面的价值保障。',
    date:'2024.05.31'
  },
  {
    img:'/homecontent/4.jpg',
    title:'鸣潮如何选择最佳角色？忌炎与吟霖之间的抉择！',
    text:'本文将为您详细解析鸣潮游戏中抽卡方面的问题，包括角色选择、卡池推荐、抽卡策略等。希望能为新手玩家提供一些实用的指导和建议。',
    date:' 2024-06-01 21:33'
  },
  {
    img:'/homecontent/5.jpg',
    title:'鸣潮四十级前的成长攻略与声骸选择',
    text:'我想各位潮友可能不清楚在四十级之前应该做些什么。那么，这次的对话指南将为大家带来实惠的建议。首先，对于还在三十级以下的潮友，请优先完成所有任务，每天清空体力，副本优先攻打角色突破材料本，即世界boss。接下来是武器突破材料本，最后是角色天赋突破材料本。',
    date:' 2024-06-01 20:46'
  },
  {
    img:'/homecontent/6.jpg',
    title:'揭秘！游戏账号交易的安全“黑幕”，氪金兽如何守护你虚拟财富？',
    text:'大家有没有遇到过，买账号时感觉被忽悠了，或者被骗子耍得团团转？游戏账号交易的那些坑真是防不胜防！别急，我这就给大家介绍一个靠谱的交易平台——氪金兽。',
    date:' 2024-06-01 17:21'
  },
  {
    img:'/homecontent/7.jpg',
    title:'能让游戏账号交易无忧的氪金兽，到底有何魔力？',
    text:'各位游戏小伙伴们，听我说！氪金兽交易在安全性上可是下足了功夫，确保每一次的交易都稳稳当当，安全无忧。',
    date:' 2024-06-01 17:19'
  },
  {
    img:'/homecontent/8.jpg',
    title:'氪金兽平台靠谱吗？游戏账号交易的安心之所',
    text:'不少玩家都纠结买号到底安不安全？哪个平台比较适合入坑？想要安全交易，氪金兽平台绝对是你的不二选择。',
    date:' 2024-06-01 17:17'
  },
  {
    img:'/homecontent/9.jpg',
    title:'游戏账号交易安全吗？答案就在氪金兽',
    text:'账号交易可是很多玩家提升游戏体验、弄到心怡的角色或装备的关键法门。但这账号交易可不简单，像买号被找回、虚假信息等，搞得很多玩家不敢下手。今天，就来给大伙讲讲氪金兽交易平台的包赔服务，看看它是怎么帮玩家解决这些问题的。',
    date:' 2024-06-01 17:13'
  }
])

</script>


<style scoped>
/*轮播图*/
.carousel-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.carousel-item-content {
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 5px;
}

.carousel-buttons {
  display: flex;
  justify-content: center;

}

.carousel-button {
  background-color: #fff;
  color: black;
  border: none;
  padding: 10px 20px;
  margin: 0;
  cursor: pointer;
}

/*.carousel-button:hover {
  background-color: #66b1ff;
}*/

.carousel-button.active {
  background-color: #5468ff; /* 设置为激活状态的颜色 */
  color: #fff;
}

/deep/ .el-card__body {
  padding: 0px !important;
}
/*筛选按钮设置*/
/deep/.el-radio-button__inner{
  height: 50px!important;
  line-height: 25px;
  color: #333;
  border: none;
}
/deep/.el-radio-button__original-radio:checked+.el-radio-button__inner{
  background-color: #fff;
  color: #5468ff;
  border: none;

}
.el-card{
  border: none;
}
/*文字只显示两行,超出部分...*/
p {
  /* 强制文字不换行 */
  white-space: normal;
  /* 超出的文字部分隐藏 */
  overflow: hidden;
  /* 溢出的文字部分替换为省略号, 即隐藏剪切后替换为... */
  text-overflow: ellipsis;
  /* 设置显示的行数 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*游戏交易资讯*/
#db{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
#db1{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>